// 工单设置 考核指标管理
import type { tableListDataItemType, formNameAndValueStateType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { ElLink, ElSpace } from 'element-plus'
import ProSaasTable from '~/components/ProSaasTable'
import AliIcon from '~/components/AliIocn'
import AssessManageOption from './options/AssessManageOption'

export default defineComponent({
  name: 'AssessManage',
  props: ['assessManageKey'],

  setup(props: { assessManageKey: string } = { assessManageKey: '' }) {
    const store = useStore()

    // 初始值
    const proSaasTableRef = ref<ProSaasTableExposeType>() // 列表
    const allName = ref() // 当前列表里所有名字
    const original = ref('') // 原始编辑时的名

    const formState = reactive<formNameAndValueStateType>({
      title: '', // 标题
      addOrEditShow: false, // 新增/编辑 弹窗是否显示
      form: {
        cfgTypeName: '', // 考核指标 名
        cfgValue: '', // 考核时间 值
        cfgTypeCode: '' // 传进来的code
      }
    })

    onMounted(() => {
      getCfgTypeName()
    })

    const columns: TableColumnProps<tableListDataItemType>[] = [
      {
        label: '指标名称',
        prop: 'cfgTypeName',
        minWidth: 180,
        fixed: 'left',
        align: 'center'
      },
      {
        label: '考核时间',
        prop: 'cfgValue',
        minWidth: 180,
        align: 'center',
        render: (_, value) => {
          return <>{value} 小时</>
        }
      },
      {
        label: '操作',
        prop: 'options',
        minWidth: 180,
        fixed: 'right',
        align: 'center',
        render: ({ row }) => {
          return (
            <>
              <ElSpace>
                <ElLink type="primary" onClick={() => editAssessManage(row)}>
                  <AliIcon type="icon-bianji" />
                  &nbsp;&nbsp;编辑
                </ElLink>
              </ElSpace>
            </>
          )
        }
      }
    ]

    // methods
    // 编辑
    const editAssessManage = async (row?: tableListDataItemType) => {
      formState.title = '考核指标管理'
      formState.addOrEditShow = !formState.addOrEditShow
      if (row) {
        formState.form = row
        original.value = row.cfgTypeName!
      }
      if (!formState.addOrEditShow) {
        proSaasTableRef.value?.toSearch() // 刷新
        getCfgTypeName() // 更新当前已存在的列表名
        formState.form = {
          // 置空
          cfgTypeName: '',
          cfgValue: '',
          cfgTypeCode: ''
        }
      }
    }

    // 获取当前列表里所有名字
    const getCfgTypeName = async () => {
      const params = {
        current: 1,
        size: 1000,
        cfgTypeCode: props.assessManageKey
      }
      const res = await store.dispatch('order/GetOrderSetList', params)
      if (res?.code === 200) {
        allName.value = []
        res.data.records.map((item: { cfgTypeName: string }) =>
          allName.value.push(item.cfgTypeName)
        )
      }
    }

    return () => (
      <>
        {/* <ElRow justify="space-between">
          <ElCol span={6}>
            <h4>工单考核指标</h4>
          </ElCol>
        </ElRow> */}
        <ProSaasTable<tableListDataItemType>
          ref={proSaasTableRef}
          columns={columns}
          searchParams={{ cfgTypeCode: props.assessManageKey }}
          dispatchType="order/GetOrderSetList" // 工单设置列表
        />

        {/* 编辑 (考核指标目前无新增) */}
        {formState.addOrEditShow && (
          <AssessManageOption
            visible={formState.addOrEditShow}
            title={formState.title}
            record={formState.form}
            original={original.value}
            allName={allName.value}
            assessManageKey={props.assessManageKey}
            onCancel={() => editAssessManage()}
          />
        )}
      </>
    )
  }
})
